<!-- 参与评选模态框 -->
<div class="modal fade" id="participateModal" tabindex="-1" aria-labelledby="participateModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="participateModalLabel">选择你的文章参与评选</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="mb-4">请从你的文章中选择一篇参与本次评选活动，每个用户限参与一次。</p>

                <div class="my-articles-list">
                    <!-- 我的文章1 -->
                    <div class="my-article-option" data-article-id="101">
                        <h5 class="mb-2">Tailwind CSS从入门到精通：构建现代UI的实用指南</h5>
                        <div class="article-meta mb-2">
                            <span><i class="far fa-calendar"></i> 2023-10-25</span>
                            <span class="ms-3"><i class="fas fa-folder"></i> 前端开发</span>
                            <span class="ms-3"><i class="far fa-eye"></i> 1,243 阅读</span>
                        </div>
                        <p class="article-excerpt mb-0">详细介绍Tailwind
                            CSS的核心概念和使用方法，从基础安装到高级配置，从响应式设计到自定义组件，帮助开发者快速掌握这一流行的CSS框架。</p>
                    </div>

                    <!-- 我的文章2 -->
                    <div class="my-article-option" data-article-id="102">
                        <h5 class="mb-2">TypeScript高级类型系统详解与实战</h5>
                        <div class="article-meta mb-2">
                            <span><i class="far fa-calendar"></i> 2023-10-18</span>
                            <span class="ms-3"><i class="fas fa-folder"></i> 前端开发</span>
                            <span class="ms-3"><i class="far fa-eye"></i> 987 阅读</span>
                        </div>
                        <p class="article-excerpt mb-0">
                            深入探讨TypeScript的高级类型特性，包括泛型、条件类型、映射类型等，通过实际案例讲解如何利用TypeScript的类型系统构建更健壮的应用。</p>
                    </div>

                    <!-- 我的文章3 -->
                    <div class="my-article-option" data-article-id="103">
                        <h5 class="mb-2">现代前端工程化实践：从开发到部署的完整流程</h5>
                        <div class="article-meta mb-2">
                            <span><i class="far fa-calendar"></i> 2023-10-10</span>
                            <span class="ms-3"><i class="fas fa-folder"></i> 前端工程化</span>
                            <span class="ms-3"><i class="far fa-eye"></i> 1,562 阅读</span>
                        </div>
                        <p class="article-excerpt mb-0">
                            介绍现代前端工程化的完整实践方案，包括代码规范、模块化开发、构建工具、自动化测试和CI/CD流程，帮助团队提升开发效率和代码质量。</p>
                    </div>
                </div>

                <div class="form-group mt-4">
                    <label for="articleUrl" class="form-label">或者输入文章链接</label>
                    <input type="url" class="form-control" id="articleUrl"
                           placeholder="https://example.com/your-article">
                    <div class="form-text">如果你的文章发布在其他平台，可以直接输入链接</div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="submitParticipation">确认参与</button>
            </div>
        </div>
    </div>
</div>


<script>
	document.addEventListener('DOMContentLoaded', function () {

		// 视图切换功能
		const viewButtons = document.querySelectorAll('.view-btn');
		const articlesContainer = document.getElementById('articlesContainer');

		viewButtons.forEach(button => {
			button.addEventListener('click', function () {
				// 移除所有按钮的活跃状态
				viewButtons.forEach(btn => btn.classList.remove('active'));
				// 添加当前按钮的活跃状态
				this.classList.add('active');

				// 获取要切换的视图类型
				const viewType = this.getAttribute('data-view');

				// 移除所有视图类
				articlesContainer.classList.remove('articles-list-view', 'articles-grid-view', 'articles-card-view');
				// 添加选中的视图类
				articlesContainer.classList.add(`articles-${viewType}-view`);
			});
		});

		// 文章选择功能
		const articleOptions = document.querySelectorAll('.my-article-option');
		articleOptions.forEach(option => {
			option.addEventListener('click', function () {
				// 移除其他选项的选中状态
				articleOptions.forEach(opt => opt.classList.remove('selected'));
				// 添加当前选项的选中状态
				this.classList.add('selected');
				// 清空URL输入框
				document.getElementById('articleUrl').value = '';
			});
		});

		// URL输入框交互
		const articleUrlInput = document.getElementById('articleUrl');
		articleUrlInput.addEventListener('focus', function () {
			// 移除所有选项的选中状态
			articleOptions.forEach(opt => opt.classList.remove('selected'));
		});

		// 提交参与
		const submitParticipationBtn = document.getElementById('submitParticipation');
		submitParticipationBtn.addEventListener('click', function () {
			// 获取选中的文章
			const selectedArticle = document.querySelector('.my-article-option.selected');
			const articleUrl = articleUrlInput.value.trim();

			let articleData = null;

			if (selectedArticle) {
				// 选中了已有文章
				const articleId = selectedArticle.getAttribute('data-article-id');
				const articleTitle = selectedArticle.querySelector('h5').textContent;
				articleData = {
					type: 'existing',
					id: articleId,
					title: articleTitle
				};
			} else if (articleUrl) {
				// 输入了文章URL
				if (!isValidUrl(articleUrl)) {
					alert('请输入有效的URL地址');
					return;
				}
				articleData = {
					type: 'external',
					url: articleUrl
				};
			} else {
				// 未选择任何文章
				alert('请选择一篇文章或输入文章链接');
				return;
			}

			// 模拟AJAX提交
			submitParticipation(articleData);
		});

		// 投票按钮交互
		const voteButtons = document.querySelectorAll('.vote-btn:not(.voted)');
		voteButtons.forEach(button => {
			button.addEventListener('click', function () {
				const articleItem = this.closest('.article-item');
				const votesCountEl = articleItem.querySelector('.votes-count span');
				const progressBar = articleItem.querySelector('.progress-bar');

				// 更新按钮状态
				this.classList.add('voted');
				this.innerHTML = '<i class="fas fa-check"></i> 已投票';

				// 更新票数
				let currentVotes = parseInt(votesCountEl.textContent);
				votesCountEl.textContent = (currentVotes + 1) + ' 票';

				// 更新进度条
				let currentProgress = parseInt(progressBar.style.width);
				progressBar.style.width = (currentProgress + 5) + '%';

				// 模拟AJAX提交投票
				const articleTitle = articleItem.querySelector('.article-title').textContent;
				submitVote(articleTitle);
			});
		});

		// 排序和筛选交互
		document.getElementById('sortSelect').addEventListener('change', function () {
			const sortBy = this.value;
			// 模拟排序
			alert(`已按${this.options[this.selectedIndex].text}排序`);
			// 实际应用中，这里应该发送AJAX请求获取排序后的文章列表
		});

		document.getElementById('categorySelect').addEventListener('change', function () {
			const category = this.value;
			// 模拟筛选
			alert(`已筛选${this.options[this.selectedIndex].text}分类`);
			// 实际应用中，这里应该发送AJAX请求获取筛选后的文章列表
		});

		// 辅助函数：验证URL
		function isValidUrl(url) {
			try {
				new URL(url);
				return true;
			} catch (e) {
				return false;
			}
		}

		// 模拟提交参与
		function submitParticipation(articleData) {
			// 显示加载状态
			submitParticipationBtn.disabled = true;
			submitParticipationBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> 提交中...';

			// 模拟AJAX请求
			setTimeout(() => {
				// 恢复按钮状态
				submitParticipationBtn.disabled = false;
				submitParticipationBtn.innerHTML = '确认参与';

				// 关闭模态框
				const modal = bootstrap.Modal.getInstance(document.getElementById('participateModal'));
				modal.hide();

				// 显示成功消息
				alert('恭喜！你的文章已成功参与本次评选活动。');
			}, 1500);
		}

		// 模拟提交投票
		function submitVote(articleTitle) {
			// 实际应用中，这里应该发送AJAX请求提交投票
			console.log(`已为文章"${articleTitle}"投票`);
		}
	});
</script>
